/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:45:07
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 13:14:35
 */

'use strict';

(function() {

	var Y = window.Y || {}



	Y.chart_pie_crm = function(setting) {

		var selector = setting.selector,
			series = setting.series,
			name = setting.name,
			colorset = setting.colorset,
			margin = setting.margin,
			width = document.querySelector(selector).offsetWidth,
			height = document.querySelector(selector).offsetHeight,
			smallRadius = setting.smallRadius,
			radius = setting.radius,
			innerRadius = 0.3 * radius,
			smallInnerRadius = 0.4 * smallRadius,
			startAngle = 0,
			endAngle = 2 * Math.PI,
			sum = 0,
			innerArcColor = setting.innerArcColor,
			outterArcColor = setting.outterArcColor,
			textStyle = setting.textStyle,
			nameStyle = setting.nameStyle

		var svg = d3.select(selector)
			.append('svg')
			.attr('width', width)
			.attr('height', height)
			//.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')

		var con = svg.append('g')
			.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')

		for (var i = 0; i < series.length; i++) {

			sum += series[i].value
		}

		var pie = d3.layout.pie()
			.sort(null)
			.startAngle(startAngle)
			.endAngle(endAngle)
			.value(function(d) {

				return d.value
			})

		var sArc = d3.svg.arc()
			.innerRadius(smallInnerRadius)
			.outerRadius(smallRadius)

		var oArc = d3.svg.arc()
			.innerRadius(smallRadius + 20)
			.outerRadius(radius)

		var temp = con.selectAll('.innerArc')
			.data(pie(series))
			.enter()
			.append('g')
			.attr('class', 'arc')
			.attr('fill', function(d, i) {

				return colorset[i]
			})
			.call(bindEvent)
		var innerPath = temp
			.append('path')

			.attr('class', 'innerArc')
			.attr('d', sArc)


		var outerPath = temp
			.append('path')

			.attr('class', 'outArc')
			.attr('d', oArc)

		var innerText = con.selectAll('.innerText')
			.data(pie(series))
			.enter()
			.append('text')
			.attr('class', 'innerText')
			.attr('transform', function(d) {

				return 'translate(' + sArc.centroid(d) + ')'
			})
			.attr('dy', '.35em')
			.style('text-anchor', 'middle')
			.text(function(d) {
				return d.data.name
			})
			.style('fill', textStyle.color)
			.style('font-size', textStyle.fontSize)

		var outerText = con.selectAll('.outerText')
			.data(pie(series))
			.enter()
			.append('text')
			.attr('class', 'outerText')
			.attr('transform', function(d) {

				return 'translate(' + oArc.centroid(d) + ')'
			})
			.attr('dy', '.35em')
			.style('text-anchor', 'middle')
			.text(function(d) {

				return ((d.data.value *100/ sum).toFixed(0)) + '%'
			})
			.style('fill', textStyle.color)
			.style('font-size', textStyle.fontSize)

		// 画外侧小圆边
		con.append('circle')
			.attr('cx', 0)
			.attr('cy', 0)
			.attr('r', smallRadius + 10)
			.attr('fill', 'none')
			.attr('stroke', outterArcColor)
			.attr('stroke-width', '2')

		// 内侧小圆
		con.append('circle')
			.attr('cx', 0)
			.attr('cy', 0)
			.attr('r', smallInnerRadius + 6)
			.attr('fill', 'none')
			.attr('stroke', innerArcColor)
			.attr('stroke-width', '2')

		con.append('text')
			.attr('x', 0)
			.attr('y', 0)
			.text(name)
			.attr('text-anchor', 'middle')
			.attr('dy', '0.35em')
			.style('font-size', nameStyle.fontSize)
			.style('font-weight', nameStyle.fontWeight)
			.style('fill', nameStyle.color)

		function bindEvent(arc) {

			arc.on('click', function(d, i) {

				setting.arcClick && setting.arcClick(d, i, d3.select(this))
			})
			.on('mousedown', function(d, i) {
				setting.arcClick && setting.arcClick(d, i, d3.select(this))
			})
			.on('touchend', function(d, i) {
				setting.arcClick && setting.arcClick(d, i, d3.select(this))
			})
		}
	}

	// 以下为调用部分
	window.Y = window.Y

}())